<!-- @module app-mgr -->
<!-- @author: YunTao.Li -->
<!-- @description:  -->
<!-- @since: 2020-03-19 17:07:16 -->
<template>
  <el-card class="box-card el-card-flex">
    <div  slot="header" class="clearfix">
      <span>
        <i class="el-icon-position"></i>
         查询信息
        </span>
    </div>
  <div style="margin: 10px">
    <!-- form begin -->
    <el-form ref="queryForm" label-width="120px" class="div-header" :model="queryForm" size="mini">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="应用名称" prop="appName">
              <el-input v-model="queryForm.appName" placeholder="应用名称" style="width: 240px"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: center;padding-top: 5px;padding-bottom: 5px;">
          <el-button
            type="primary"
            size="small"
            @click="getList()"
          >查询
          <i class="el-icon-search"></i>
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="resetForm('queryForm')"
          >重置
          <i class="el-icon-refresh"></i>
          </el-button>
        </div>
    </el-form>
    <!-- form end -->
    <div class="el-flex el-box-column " style="margin-top: 5px;">

      <div class="div-button">
        <!--<el-button-->
          <!--icon="el-icon-menu"-->
          <!--type="success"-->
          <!--:disabled.sync="btn_add_disabled"-->
          <!--size="small"-->
          <!--@click="onAdd"-->
        <!--&gt;新增</el-button>-->
        <!--<el-button-->
          <!--icon="el-icon-menu"-->
          <!--type="warning"-->
          <!--size="small"-->
          <!--:disabled.sync="btn_edit_disabled"-->
          <!--@click="onEdit"-->
        <!--&gt;编辑</el-button>-->
        <!-- <el-button
          icon="el-icon-menu"
          type="danger"
          size="small"
          :disabled.sync="btn_delete_disabled"
          @click="handleDelete"
        >删除</el-button> -->
        <!--<el-button-->
          <!--icon="el-icon-menu"-->
          <!--type="primary"-->
          <!--size="small"-->
          <!--:disabled.sync="btn_valid_disabled"-->
          <!--@click="onAppValid"-->
        <!--&gt;开启通知</el-button>-->
        <!--<el-button-->
          <!--icon="el-icon-menu"-->
          <!--type="primary"-->
          <!--size="small"-->
          <!--:disabled.sync="btn_invalid_disabled"-->
          <!--@click="onAppInvalid"-->
        <!--&gt;关闭通知</el-button>-->
      </div>
      <!-- table begin-->
      <div class="el-flex el-box-column " style="margin: 3px;">
        <el-card class="box-card el-card-flex" >
          <div slot="header" class="clearfix">
        <span>
          <i class="el-icon-position"></i>
            微应用
        </span>
          <span style="float: right">
            <el-button  type="text" :disabled.sync="btn_add_disabled" size="small" @click="onAdd">新增 <i class="el-icon-plus"></i></el-button>
          </span>

          </div>
        <div class="el-flex el-box-column" style="margin: 3px;" >
        <el-table v-loading="listLoading" :data="appList" border fit
                  highlight-current-row style="width: 100%" max-height="550"
                  @selection-change="onSelectChange">
            <el-table-column type="selection" width="55" />
            <el-table-column align="center" type="index" width="55" label="序号" />

            <!--应用编码-->
            <el-table-column align="center" label="应用编码" width="150px">
              <template slot-scope="scope">
                <span>{{ scope.row.appCode }}</span>
              </template>
            </el-table-column>

            <!--应用名称-->
            <el-table-column align="center" label="应用名称" width="150px">
              <template slot-scope="scope">
                <span>{{ scope.row.appName }}</span>
              </template>
            </el-table-column>

            <!--应用状态-->
            <el-table-column align="center" label="应用状态" width="150px">
              <template slot-scope="scope">
                <span>{{ scope.row.appStatus==0?"不通知":"通知" }}</span>
              </template>
            </el-table-column>

          <!--操作-->
          <el-table-column align="center" label="操作" width="150px">
            <template slot-scope="scope">
            <el-button icon="el-icon-edit" class="td-btn-icon" type="text"   title="编辑" @click="onEdit()"></el-button>
            <el-button icon="el-icon-bell" class="td-btn-icon" type="text"   v-if="scope.row.appStatus==1" title="关闭通知" @click="onAppInvalid"></el-button>
            <el-button icon="el-icon-message-solid" class="td-btn-icon" type="text"  v-if="scope.row.appStatus==0" title="开启通知" @click="onAppValid"></el-button>

            </template>
          </el-table-column>


          </el-table>
      <!-- table end -->
          </div>
          <pagination v-show="total>0" :total="total" :page.sync="queryForm.page" :limit.sync="queryForm.limit" @pagination="getList" />
        </el-card>
     <appInputForm ref="appInputDialog" @submitFunc="onSubmitAppInputForm" />
      </div>
      </div>
  </div>
  </el-card>
</template>

<script>
import { appInfoList, appAdd, appUpdate } from '@/api/message/app-service'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import appInputForm from '@/views/message/component/app-form'

export default {
  components: { Pagination, appInputForm },
  data() {
    return {
      msg: '-',
      text_form: '查询信息',
      text_grid: '微应用',
      btn_add_disabled: false,
      btn_delete_disabled: true,
      btn_edit_disabled: true,
      btn_valid_disabled: true,
      btn_invalid_disabled: true,
      appList: [],
      listLoading: true,
      total: 0,
      selectedLength: 0,
      lastSelectedData: null,
      queryForm: {
        page: 1,
        limit: 10,
        msgTo: '',
        appName: ''

      }
    }
  },
  created() {
    // 初始化查询展示
    this.getList()
    // 初始化按钮diabled状态
    this.onSelectChange({})
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getList() {
      this.listLoading = true
      appInfoList(this.queryForm).then(response => {
        this.appList = response.data.records
        this.total = response.data.total

        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    inputFormToggle(selectedData) {
      this.$refs.appInputDialog.toggele(selectedData)
    },
    handleAdd(data) { // 添加方法
      appAdd(data)
        .then(response => {
          if (response.code === 200) {
            this.getList()
            // 清理子组件
            this.$refs.appInputDialog.resetFormData()
          } else {
            this.$message.error(response.message)
          }
        })
    },
    handleEdit(data) { // 编辑方法
      appUpdate(data.appId, data)
        .then(response => {
          if (response.code === 200) {
            this.getList()
            // 清理子组件
            this.$refs.appInputDialog.resetFormData()
          } else {
            this.$message.error(response.message)
          }
        })
    },
    onAppValid(data) {
      const appData = JSON.parse(JSON.stringify(this.lastSelectedData))
      appData.appStatus = 1
      appUpdate(appData.appId, appData)
        .then(response => {
          if (response.code === 200) {
            this.getList()
            // 清理子组件
            this.$refs.appInputDialog.resetFormData()
          } else {
            this.$message.error(response.message)
          }
        })
    },
    onAppInvalid() {
      const appData = JSON.parse(JSON.stringify(this.lastSelectedData))
      appData.appStatus = 0
      appUpdate(appData.appId, appData)
        .then(response => {
          if (response.code === 200) {
            this.getList()
            // 清理子组件
            this.$refs.appInputDialog.resetFormData()
          } else {
            this.$message.error(response.message)
          }
        })
    },
    onAdd() {
      this.inputFormToggle(null)
    },
    onEdit() {
      const selectedData = JSON.parse(JSON.stringify(this.lastSelectedData))
      this.inputFormToggle(selectedData)
    },
    onSubmitAppInputForm(data) { // 表单提交事件
      const submitappId = data.appId

      if (submitappId === null || submitappId === '' || JSON.stringify(submitappId) === '{}') {
        this.handleAdd(data)
      } else {
        this.handleEdit(data)
      }
    },
    onSelectChange(selection) {
      this.selectedLength = selection.length || 0
      this.lastSelectedData = selection[this.selectedLength - 1]

      this.btn_delete_disabled = true
      this.btn_edit_disabled = true
      this.btn_invalid_disabled = true
      this.btn_valid_disabled = true

      if (!this.lastSelectedData) {
        return
      }

      // 根据审批状态改变按钮行为
      const appStatus = this.lastSelectedData.appStatus

      if (this.selectedLength && this.selectedLength === 1) {
        this.btn_edit_disabled = false
        if (appStatus && appStatus === 1) { // 不通知
          this.btn_invalid_disabled = false
        } else {
          this.btn_valid_disabled = false
        }
      } else {
        this.btn_delete_disabled = true
        this.btn_edit_disabled = true
        this.btn_invalid_disabled = true
        this.btn_valid_disabled = true
      }
    }
  }
}
</script>

<style>
.el-table .message-unread {
  font-weight: bolder;
  }
</style>
<style scoped>

.el-table__header{
    font-size: 10px
}
.el-table{
    font-size: 12px
}
.div-body{
  margin-top: 5px;
}
.div-header{
  font-size: 12px
}
.el-form-item__label{
  font-size: 12px
}
element.style{
  padding-top: 0px;
}
fieldset {
    display: block;
    margin-inline-start: 1px;
    margin-inline-end: 1px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(200, 202, 204);
    border-image: initial;
}
div.popContainer{
    position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
        color: white;
}
</style>
